<template>
  <div>
    <!-- 表格 -->
    <el-table class="mt-12" v-loading="loading" :data="tableList">
      <el-table-column label="群名" fixed prop="userName">
        <template slot-scope="scope">
          <div class="flex kh_box">
            <img
              src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
              alt=""
              class="useravatar"
            />
            <div class="khnamebox pl-12">
              <div class="title c_222333">{{ scope.row.title || "--" }}</div>
              <div class="c_warning f-12">@志新</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="邀请次数" prop="userName">
        <template slot-scope="scope">
          <span class="flex aligncenter">
            {{ scope.row.num || "-" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="userName">
        <template slot-scope="scope">
          <span class="flex aligncenter c_text2">
            <svg-icon icon-class="iwait" class-name="mr-6" />
            未处理{{ scope.row.status }}
          </span>
          <span class="flex aligncenter" style="color: #fb584e">
            <i class="el-icon-warning f-16 mr-6"></i>
            已在目标群{{ scope.row.status }}
          </span>
          <span class="flex aligncenter">
            <svg-icon icon-class="iemail" class-name="mr-6" />
            已邀请{{ scope.row.status }}
          </span>
          <span class="flex aligncenter">
            <img
              src="@/assets/images/iconsucess.png"
              alt=""
              class="mr-6 statusicon"
            />
            邀请完成
          </span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      class="mt-0"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      tableList: [{ id: 2 }],
      loading: false,
      statusList: [
        { value: 1, label: "邀请中" },
        { value: 2, label: "已邀请" },
        { value: 3, label: "已入群" },
        { value: 4, label: "已退群" },
        { value: 5, label: "邀请失败" },
        { value: 6, label: "已取消" },
        { value: 7, label: "未邀请" },
      ],
    };
  },
  methods: {
    getList() {},

    handleQuery() {},
  },
};
</script>

<style lang="scss" scoped>
.statusicon {
  width: 14px;
  height: 14px;
}
</style>